<template>
	<view>
		<u-form :model="form" ref="uForm">
			<u-form-item label="岗位" prop="userInfo.sex" borderBottom @click="showSex = true; " ref="item1">
				<u--input v-model="form.post" disabled disabledColor="#ffffff" placeholder="请选择岗位" border="none">
				</u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
		</u-form>
		<u-action-sheet :show="showSex" :actions="actions" @close="showSex = false" @select="sexSelect">
		</u-action-sheet>
		<view class="btn" @click="">
			<u-button type="primary" class="leave">提交申请</u-button>
		</view>
		<view style="background-color: #fff;padding-left: 32rpx;padding-right: 32rpx;padding-bottom: 24rpx;">
			<text class="reasonTitle">离职原因</text>
			<u--textarea v-model="reason" placeholder="请输入离职原因" :height='400' border='none' maxlength='-1'></u--textarea>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showSex: false,
				form: {
					post: '',
				},
				actions: [{
						name: '思想动态观察岗',
					},
					{
						name: '思想动态观察岗1',
					},
					{
						name: '思想动态观察岗2',
					},
				],
				reason: ''
			}
		},
		methods: {
			sexSelect(e) {
				this.form.post = e.name
				this.$refs.uForm.validateField('form.post')
			},
		}
	}
</script>

<style scoped lang="scss">
	page {
		background: #FAFAFA;
	}

	/deep/.u-form-item {
		background-color: #fff;
	}

	/deep/.u-form-item__body {
		margin: 0 32rpx;
	}

	/deep/.u-form-item__body__left {
		color: #333333;
		font-size: 32rpx;
	}

	/deep/.u-form-item__body__right__content__slot {
		.uni-input-input {
			font-size: 28rpx;
			font-weight: 400;
			color: #666666;
			text-align: right;
		}
	}
	/deep/.uni-input-placeholder{
		color: #666!important;
	}
	/deep/.uni-input-wrapper{
		text-align: right;
	}

	/deep/.uicon-arrow-right {
		font-size: 14rpx !important;
		top: 4rpx !important;
	}
	/deep/.u-textarea{
		padding: 0;
	}
	.reasonTitle {
		margin-top: 24rpx;
		margin-bottom: 16rpx;
		color: #333333;
		font-weight: 400;
		font-size: 32rpx;
	}

	.u-form {
		margin-top: 24rpx;
		margin-bottom: 16rpx;

		/deep/.u-line {
			display: none !important;
		}
	}

	.btn {
		width: 100%;
		height: 148rpx;
		background: #FFFFFF;
		display: block;
		position: fixed;
		bottom: 0;
		box-shadow: 0px -4px 8px 0px rgba(0, 0, 0, 0.05);

		.leave {
			width: 686rpx;
			height: 100rpx;
			background: #2674FF;
			border-radius: 8rpx;
			margin-top: 24rpx;
		}
	}
</style>
